<template>
  <div class="index">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <div class="content ">
      <h1>{{ showIndex }}</h1>
      <h3>{{ info.title }}</h3>
      <p>{{ info.content }}</p>
      <a :href="info.href" target="_blank">Know More</a>
    </div>
  </div>
</template>

<script setup >
const props = defineProps({
  index: {
    type: Number,
    default: 1
  },
  info: {
    type: Object,
    default() {
      return {
        title: 'none',
        content: 'none',
        href: '#'
      };
    }
  }
});
const { info, index } = toRefs(props);

const showIndex = computed(() => {
  const res = index.value + 1;
  return res > 9 ? res : `0${res}`;
});

</script>

<style lang="scss" scoped>
  $color: #b6f8b2;
  .index{
    cursor:pointer;
    position: relative;
    overflow:hidden ;
    width: 236px;
    height: 416px;
    flex-wrap: wrap;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 22px;
    box-shadow: 10px 10px 6px rgba(0,0,0,0.66);
    &:hover .content {
      h1{
        opacity: 1;
        transform: translateY(-26px);
      }
      h3, p, a{
        opacity: 1;
      }
      h3{
        margin-top: 16px;
        margin-bottom: 20px;
      }
      a{
        margin-top: 26px;
      }
    }
    &::before{
      content: "";
      transition: .5s;
      position: absolute;
      top: 1px;
      left: 1px;
      bottom: 1px;
      width: 50%;
      background: rgba(255,255,255,0.6);
      pointer-events: none;
    }
    &::after{
      content: "";
      transition: .5s;
      position: absolute;
      top: 1px;
      right: 1px;
      bottom: 1px;
      width: 50%;
      background: rgba(19, 19, 19, 0.6);
      pointer-events: none;
    }
    &:hover:after,&:hover:before{
      width: 0;
    }
    .content{
      width: inherit;
      height: inherit;
      padding: 68px 30px;
      text-align: center;
      h1{
        position: absolute;
        top: 30px;
        right: 16px;
        font-size: 4em;
        font-weight: bold;
        color: $color;
        z-index: 1;
        opacity: 0 ;
        transition: 0.5s  ;
      }
      h3{
        position: relative;
        width: 80%;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        letter-spacing: 1px;
        font-size: 2.6em;
        font-weight: bold;
        color: #ffffff;
        z-index: 2;
        opacity: 0.6;
        transition: 0.5s  ;
      }
      p{
        position: relative;
        margin-top: 16px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        padding: 0  16px;
        letter-spacing: 1px;
        font-size: 1em;
        line-height: 2em;
        font-weight: 500;
        color: #ffffff;
        z-index: 2;
        opacity: 0.5;
        transition: 0.5s  ;
      }
      a{
        position: relative;
        display: inline-block;
        padding: 8px 15px;
        margin-top: 15px;
        background: rgba(255,255,255,0.2);
        color: #000;
        z-index: 2;
        opacity: 0.16;
        transition: 0.8s;
        &:hover{
          background: white;
        }
      }
    }
    span{
      transition: .5s;
      box-shadow: 0 0 50px $color;
    }
    &:hover {
      span:nth-child(1) {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(to right, transparent, $color);
        animation: animite1 2s linear infinite;
      }

      span:nth-child(2) {
        position: absolute;
        right: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(to bottom, transparent, $color);
        animation: animite2 2s linear infinite;
        animation-delay: 1s;
      }
      span:nth-child(3) {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(to left, transparent, $color);
        animation: animite3 2s linear infinite;
      }
      span:nth-child(4) {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(to top, transparent, $color);
        animation: animite4 2s linear infinite;
        animation-delay: 1s;
      }
    }
  }
  @media screen and (max-width: 1200px) {
    .index {
      margin: 16px;
      height: 220px;
      width: 146px;
      &:hover .content {
        h1 {
          transform: translateY(-16px);
        }
        h3 {
          margin-top: 12px;
          margin-bottom: 12px;
        }
        a {
          margin-top: 16px;
        }
      }
      .content {
        width: inherit;
        height: inherit;
        padding: 16px 12px;
        text-align: center;

        h1 {
          top: 12px;
          right: 8px;
          font-size: 2em;
        }

        h3 {
          font-size: 1em;
        }

        p {
          margin-top: 10px;
          -webkit-line-clamp: 5;
          padding: 0 8px;
          font-size: .8em;
          line-height: 1.2em;
        }

        a {
          padding: 6px 6px;
          margin-top: 12px;
          font-size: .8em;
        }
      }
    }
}
  @keyframes animite1 {
    0%{
      transform: translateX(-100%);
    }
    100%{
      transform: translateX(100%);
    }
  }
  @keyframes animite2 {
    0%{
      transform: translateY(-100%);
    }
    100%{
      transform: translateY(100%);
    }
  }
  @keyframes animite3 {
    0%{
      transform: translateX(100%);
    }
    100%{
      transform: translateX(-100%);
    }
  }
  @keyframes animite4 {
    0%{
      transform: translateY(100%);
    }
    100%{
      transform: translateY(-100%);
    }
  }
</style>
